<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>公屏聊天</title>
		<script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
		<style type="text/css">
			*{margin: 0;padding: 0;}
			.center-main {
				width: 300px;
				height: 200px;
				margin: 12px auto;
				background-color: lightcyan;
				text-align: center;
				display: block;
			}

			.center-main input {
				margin-top: 15px;
				width: 180px;
				height: 30px;
				border-radius: 5px;
			}

			.chat-board {
				width: 600px;
				height: 500px;
				margin: 24px auto;
				/* background-color: lightgoldenrodyellow; */
				display: none;
				border: 1px solid #d4d0cf;
			}

			#chatBoardTop {
				width: 100%;
				height: 460px;
				/* background-color: #C7DBF1; */
				
				/* text-align: center; */
			}
			#chatBoardTop p{
				text-align: center;
				margin: 5px;
			}
			#headBox{
				width: 100%;
				height: 40px;
				background-color: lightcyan;
				text-align: center;
				line-height: 40px;
			}
			#chatContent{
				width: 100%;
				height: 420px;
				overflow-y: scroll;
			}
			#chatContent::-webkit-scrollbar {
				display: none;
			}
			
			.message{
				height: 40px;
				width: 500px;
				border: 1px solid #ccc;
				box-sizing: border-box;
				font-size: 18px;
				float: left;
			}
			.sendMessage{
				width: 100px;
				height: 40px;
				border: 0;
				outline: 0;
				background-color: lightblue;
			}
			.left{
				width: 100%;
				min-height: 50px;
				position: relative;
				margin-top: 10px;
			}
			.left .header{
				width: 50px;
				height: 50px;
				border-radius: 50%;
				float: left;
				background-color: lightgreen;
				margin-right: 10px;
			}
			.left span{
				font-size: 12px;
				color: #13100f;
				display: block;
			}
			.left .mesg,.right .mesg{
				height: 30px;
				padding-left: 20px;
				padding-right: 20px;
				float: left;
				margin-top: 5px;
				border-radius: 10px;
				line-height: 30px;
				background-color: lightgoldenrodyellow;
			}
			.right{
				width: 100%;
				min-height: 50px;
				position: relative;
				margin-top: 10px;
			}
			.right .header{
				width: 50px;
				height: 50px;
				position: absolute;
				right: 5px;
				background-color: lightgreen;
				border-radius: 50%;
			}
			.right .mesg{
				position: absolute;
				right: 60px;
				bottom: 10px;
			}
			.priL{
				display: block;
			}
		</style>
	</head>
	<body>
		<div id="loginBoard" class="center-main">
			<input type="text" id="userName" value="huang" placeholder="连接账户" />
			<br>
			<input type="password" id="userPass" value="123456" placeholder="连接密码" />
			<br>
			<input type="button" id="connect" value="连接" />
		</div>

		<div id="chatBoard" class="chat-board">
			<div id="chatBoardTop">
				<div id="headBox">聊天室</div>
				<div id="chatContent"></div>
				<!-- <p>sjadhjsdhsj</p>
				<div class="left">
					<div class="header"></div>
					<span>名称</span>
					<div class="mesg">
						我发送了啥
					</div>
				</div>
				<div class="right">
					<div class="header"></div>
					<div class="mesg">
						我发送了啥
					</div>
				</div> -->
			</div>
			<!-- <hr> -->
			<div id="chatBoardBottom">
				<input type="text" id="message" class="message"/>
				<input type="button" id="sendMessage" class="sendMessage" value="发送" />
			</div>
		</div>
	
	    <!-- 私聊窗口 -->
		<!-- <div class="chat-board priL" id="privateBoard">
			<div id="chatBoardTop">
				<div id="headBox">聊天室</div>
			</div>
			<div id="chatBoardBottom">
				<input type="text" id="messagex" class="message"/>
				<input type="button" id="sendPrivateMessage" class="sendMessage" value="发送" />
			</div>
		</div> -->
	</body>

	<script type="text/javascript">
		var _webS = null; //预留给ws的全局变量
		var userName = null;
		// 连接按钮
		$("#connect").click(function() {
			userName = $("#userName").val().trim();
			var userPass = $("#userPass").val().trim();
			// 容错
			if (!userName || !userPass) {
				alert("请输入正确的账户名或密码");
				return;
			}
			if (!_webS) {
				websocketInit(userName, userPass);
			}
		})

		$("#sendMessage").click(function() {
			var message = $("#message").val().trim();
			if (!message) {
				alert("不能发送空消息");
				return;
			}
			var connectCheck = {
				type: "public",
				sender: userName,
				to: "",
				info: message
			}
			_webS.send(JSON.stringify(connectCheck));
			$("#message").val("");
		})

		function websocketInit(userName, userPass) {
			// 创建即连接
			_webS = new WebSocket("ws://localhost:3000?name=" + userName + "&password=" + userPass);
			// 连接成功事件
			_webS.onopen = function() {
				console.info("已经与后端socket建立连接");

				var connectCheck = {
					type: "connect",
					sender: userName,
					to: "",
					info: "我是客户端，向您致敬"
				}
				// 发消息
				_webS.send(JSON.stringify(connectCheck));
				$("#loginBoard").slideUp();
				$("#chatBoard").fadeIn();
			}
			// error事件
			_webS.onerror = function(err) {
				// alert("连接出错，请看控制台");
				console.log(err);
				$("#loginBoard").slideDown();
			}
			// 接收消息的是事件
			_webS.onmessage = function(mess) {
				// console.log(mess.data);
				var message = JSON.parse(mess.data);
				var messageString = "";
				if (message.type == "welcome") {
					messageString =
						`<p>**** 欢迎 ${message.sender} ... ${message.info}</p> `;
				}
				if (message.type == "public") {
					if(userName == message.sender){
						messageString = `<div class="right">
					<div class="header"></div>
					<div class="mesg">
						${message.info}
					</div>
				</div>`;
					}else{
						messageString = `<div class="left">
					<div class="header"></div>
					<span onclick="sendPrivateMess(this)">${message.sender}</span>
					<div class="mesg">
						${message.info}
					</div>
				</div>`;
					}
				}
				if (message.type == "private") {
					messageString = `<div class="left">
						<div class="header"></div>
						<span onclick="sendPrivateMess(this)">${message.sender}</span>
						<div class="mesg">
							${message.info}
						</div>
					</div>`;
				}

				if (messageString) {
					$("#chatContent").append(messageString);
				}
				// 让滚动条滚动到底部
				var t = document.getElementById("chatContent");
				t.scrollTop = t.scrollHeight;
			}

		}

		// 私聊入口 - 点人进行私聊 to - 消息 -
		function sendPrivateMess(tar) {
			$(".aaaa").remove();
			var toWho = tar.innerHTML.trim(); //去取私聊对方的名字
			$("#headBox").html("私聊 " + toWho);
			if (toWho == userName) {
				return;
			}
			var xxx =
				`<div class="aaaa">
			<br>
			<input style="width:200px;height:30px;border:0" type="text" placeholder="输出悄悄话" onchange="sendPrivate(this, '${toWho}')"/>
			<br/>
			</div>`;
			$(tar).after(xxx);
		}

		function sendPrivate(inputTag, toWho) {
			var messp = $(inputTag).val();
			if (!messp || !toWho) {
				return;
			}
			// 发送消息
			var connectCheck = {
				type: "private",
				sender: userName,
				to: toWho,
				info: messp
			}
			_webS.send(JSON.stringify(connectCheck));
			// 干掉私聊框
			$(".aaaa").remove();
			
			messageString = `<div class="right">
				<div class="header"></div>
				<div class="mesg">
					${messp}
				</div>
			</div>`;
			$("#chatContent").append(messageString);
		}
	</script>
</html>
